<template>
	<view class="share-container">
		<!-- 顶部拼单状态提示 -->
		<view class="share-status">
			<view class="status-text">
				<text class="status-title">拼单还未成功</text>
				<text class="status-subtitle">分享给小伙伴来拼单吧~</text>
			</view>
			<image src="/static/svg/refresh-icon.svg" class="refresh-icon"></image>
		</view>
		
		<!-- 地址信息 -->
		<view class="address-section">
			<view class="address-content">
				<view class="address-left">
					<image src="/static/svg/location-icon.svg" class="location-icon"></image>
				</view>
				<view class="address-right">
					<view class="address-user">
						<text class="user-name">李小花</text>
						<text class="user-phone">1885138766</text>
					</view>
					<view class="address-detail">
						广东省广州市大华区明离路科技园880号
					</view>
				</view>
			</view>
		</view>
		
		<!-- 拼团信息 -->
		<view class="group-info">
			<view class="member-count">
				<text>待分享，还差1人</text>
			</view>
			
			<view class="group-users">
				<!-- 团长 -->
				<view class="user-item leader">
					<view class="avatar-container">
						<image src="/static/default-recommend.png" class="avatar-img"></image>
						<view class="leader-tag">团长</view>
					</view>
				</view>
				
				<!-- 等待加入的位置 -->
				<view class="user-item waiting">
					<view class="waiting-avatar">?</view>
				</view>
			</view>
			
			<!-- 邀请按钮 -->
			<button class="invite-btn">邀请好友拼单</button>
		</view>
		
		<!-- 商品信息 -->
		<view class="goods-section">
			<view class="goods-item">
				<image class="goods-img" src="/static/default-recommend.png" mode="aspectFill"></image>
				<view class="goods-content">
					<view class="goods-title">艾丽苏抹茶蛋糕早点低糖健康</view>
					<view class="goods-sku">实惠装</view>
					<view class="group-tag">3人团</view>
					<view class="goods-price">
						<text class="price-value">¥136</text>
						<text class="goods-count">×1</text>
					</view>
				</view>
			</view>
			
			<!-- 价格明细 -->
			<view class="price-section">
				<view class="price-item">
					<text class="price-label">商品总额：</text>
					<text class="price-value">¥136.00</text>
				</view>
				<view class="price-item">
					<text class="price-label">运费：</text>
					<text class="price-value">¥0.00</text>
				</view>
				<view class="price-item">
					<text class="price-label">商品优惠：</text>
					<text class="price-value">-¥10.00</text>
				</view>
				<view class="price-item actual-price">
					<text class="price-label">实付款：</text>
					<text class="price-value highlight">¥126.00</text>
				</view>
			</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="order-info-section">
			<view class="order-info-item">
				<text class="order-info-label">订单号：</text>
				<text class="order-info-value">4186283277</text>
			</view>
			<view class="order-info-item">
				<text class="order-info-label">下单时间：</text>
				<text class="order-info-value">2019-02-16 15:36:25</text>
			</view>
			<view class="order-info-item">
				<text class="order-info-label">付款时间：</text>
				<text class="order-info-value">2019-02-16 16:36:25</text>
			</view>
		</view>
		
		<!-- 底部操作按钮 -->
		<view class="bottom-action">
			<button class="cancel-btn" @click="cancelOrder">取消订单</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 取消订单
const cancelOrder = () => {
	uni.showModal({
		title: '提示',
		content: '确定要取消订单吗？',
		success: (res) => {
			if (res.confirm) {
				// 调用取消订单接口
				uni.showToast({
					title: '订单已取消',
					icon: 'success'
				});
				// 跳转回订单列表
				uni.navigateBack();
			}
		}
	});
};
</script>

<style>
.share-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	font-size: 28rpx;
	color: #333;
	padding-bottom: 120rpx;
}

/* 顶部拼单状态 */
.share-status {
	background-color: #FF6B35;
	color: #fff;
	padding: 40rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.status-title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.status-subtitle {
	font-size: 28rpx;
	display: block;
}

.refresh-icon {
	width: 80rpx;
	height: 80rpx;
}

/* 地址信息 */
.address-section {
	background-color: #fff;
	padding: 30rpx;
}

.address-content {
	display: flex;
	align-items: flex-start;
}

.address-left {
	margin-right: 20rpx;
}

.location-icon {
	width: 40rpx;
	height: 40rpx;
}

.address-user {
	display: flex;
	margin-bottom: 10rpx;
}

.user-name {
	margin-right: 20rpx;
	font-weight: bold;
}

.address-detail {
	font-size: 28rpx;
	color: #666;
}

/* 拼团信息 */
.group-info {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 30rpx;
}

.member-count {
	text-align: center;
	color: #666;
	margin-bottom: 30rpx;
}

.group-users {
	display: flex;
	justify-content: center;
	padding: 20rpx 0;
}

.user-item {
	margin: 0 30rpx;
	position: relative;
}

.avatar-container {
	position: relative;
}

.avatar-img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
}

.leader-tag {
	position: absolute;
	bottom: -10rpx;
	left: 50%;
	transform: translateX(-50%);
	background-color: #FF6B35;
	color: #fff;
	border-radius: 20rpx;
	padding: 2rpx 12rpx;
	font-size: 22rpx;
}

.waiting-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: #f1f1f1;
	color: #999;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	border: 2rpx dashed #ddd;
}

.invite-btn {
	background-color: #FF6B35;
	color: #fff;
	margin-top: 40rpx;
	border-radius: 40rpx;
	font-size: 30rpx;
	padding: 20rpx 0;
}

/* 商品信息 */
.goods-section {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 30rpx;
}

.goods-item {
	display: flex;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #f1f1f1;
}

.goods-img {
	width: 160rpx;
	height: 160rpx;
	margin-right: 20rpx;
	background-color: #f5f5f5;
}

.goods-content {
	flex: 1;
	position: relative;
}

.goods-title {
	font-size: 30rpx;
	margin-bottom: 10rpx;
	font-weight: bold;
}

.goods-sku {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.group-tag {
	display: inline-block;
	background-color: #FFF1E5;
	color: #FF6B35;
	font-size: 22rpx;
	padding: 2rpx 12rpx;
	border-radius: 6rpx;
	margin-bottom: 10rpx;
}

.goods-price {
	display: flex;
	justify-content: space-between;
}

.price-value {
	font-weight: bold;
}

.goods-count {
	color: #999;
}

/* 价格明细 */
.price-section {
	padding-top: 30rpx;
}

.price-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
	font-size: 26rpx;
	color: #666;
}

.actual-price {
	font-weight: bold;
	color: #333;
}

.highlight {
	color: #FF6B35;
}

/* 订单信息 */
.order-info-section {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 30rpx;
}

.order-info-item {
	display: flex;
	margin-bottom: 15rpx;
	font-size: 26rpx;
	color: #666;
}

.order-info-label {
	margin-right: 10rpx;
}

/* 底部按钮 */
.bottom-action {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
	display: flex;
	justify-content: flex-end;
}

.cancel-btn {
	background-color: #fff;
	color: #666;
	border: 1rpx solid #ddd;
	border-radius: 40rpx;
	font-size: 28rpx;
	padding: 15rpx 40rpx;
}
</style>
